<template>
  <div class='header'>
    <h1>Header</h1>
    <h1>{{count}}</h1>
    <h2>{{price}}</h2>
  </div>
</template>

<script>
import {mapState} from 'vuex'
 
export default {
    name:'Header',
    mounted() {
        console.log(this)
    },
    computed:{
        count(){
            return this.$store.state.count
        },
        ...mapState(['price'])
    }

}
</script>

<style scoped>
    .header{
        height: 200px;
        background: palevioletred;
    }
</style>